<template>
  <div style="width: 1000px">
    <div style=" margin-top:20px;">
      <el-table :data="tableData" stripe border max-height="350px" style="width: 100%;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="id" label="编号" width="80" sortable></el-table-column>
        <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
          <template v-slot="scope">
            {{scope.row.sex === 0?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button @click="removeClick(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 10px auto;width: 600px">
      <el-pagination
          background
          layout="prev, pager, next,sizes"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id: 5,
          date: '2016-05-02',
          name: '王小虎',
          sex:1,
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 6,
          date: '2016-05-04',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 7,
          date: '2016-05-01',
          name: '王小虎',
          sex:1,
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 8,
          date: '2016-05-03',
          name: '王小虎',
          sex:0,
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    removeClick(id) {
      console.log(id);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.el-row, h4 {
  margin-top: 20px;
}
</style>